@extends('admin::layouts.master')

@section('title', __('MultiSeller::seller.title'))

@section('content')
  @if ($errors->has('error'))
  <x-seller-alert type="danger" msg="{{ $errors->first('error') }}" class="mt-4" />
  @endif

  @if (session()->has('success'))
  <x-seller-alert type="success" msg="{{ session('success') }}" class="mt-4" />
  @endif

  <div class="card">
    <div class="card-body">
      <div id="seller-app" v-cloak>
        <div class="bg-light p-4 mb-3">
          <el-form :inline="true" :model="filter" class="demo-form-inline" label-width="100px">
            <div>
              <el-form-item label="{{ __('MultiSeller::seller.store_name') }}">
                <el-input @keyup.enter.native="search" v-model="filter.like_store_name" size="small" placeholder="{{ __('MultiSeller::seller.store_name') }}"></el-input>
              </el-form-item>
              <el-form-item label="{{ __('MultiSeller::seller.email') }}">
                <el-input @keyup.enter.native="search" v-model="filter.email" size="small" placeholder="{{ __('MultiSeller::seller.email') }}"></el-input>
              </el-form-item>
              <el-form-item label="{{ __('MultiSeller::seller.seller_group') }}">
                <el-select size="small" v-model="filter.seller_group_id" placeholder="{{ __('common.please_choose') }}">
                  <el-option v-for="item in source.seller_group" :key="item.id" :label="item.name"
                    :value="item.id + ''">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="{{ __('common.status') }}">
                <el-select size="small" v-model="filter.status" placeholder="{{ __('common.please_choose') }}">
                  <el-option label="{{ __('common.all') }}" value=""></el-option>
                  <el-option label="{{ __('common.enabled') }}" value="1"></el-option>
                  <el-option label="{{ __('common.disabled') }}" value="0"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-form>

          <div class="row">
            <label class="wp-100"></label>
            <div class="col-auto">
              <button type="button" @click="search" class="btn btn-outline-primary btn-sm">{{ __('common.filter') }}</button>
              <button type="button" @click="resetSearch" class="btn btn-outline-secondary btn-sm ms-1">{{ __('common.reset') }}</button>
            </div>
          </div>

          <el-dialog title="{{ __('MultiSeller::common.create') }}" :visible.sync="dialogSellers.show" width="670px"
          @close="closeSellersDialog('form')" :close-on-click-modal="false">
            <el-form ref="form" :rules="rules" :model="dialogSellers.form" label-width="120px">
              <el-form-item label="{{ __('MultiSeller::seller.store_name') }}" prop="name">
                <el-input v-model="dialogSellers.form.store_name" placeholder="{{ __('MultiSeller::seller.store_name') }}"></el-input>
              </el-form-item>
              <el-form-item label="{{ __('MultiSeller::seller.email') }}" prop="email">
                <el-input v-model="dialogSellers.form.email" placeholder="{{ __('MultiSeller::seller.email') }}"></el-input>
              </el-form-item>
              <el-form-item label="{{ __('MultiSeller::seller.password') }}" prop="password">
                <el-input v-model="dialogSellers.form.password" placeholder="{{ __('MultiSeller::seller.password') }}"></el-input>
              </el-form-item>
              <el-form-item label="{{ __('MultiSeller::seller.seller_group') }}">
                <el-select v-model="dialogSellers.form.seller_group_id" placeholder="">
                  <el-option v-for="item in source.seller_group" :key="item.id" :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="{{ __('MultiSeller::seller.product_approve') }}" prop="product_approve">
                <el-switch v-model="dialogSellers.form.product_approve" :active-value="1" :inactive-value="0"></el-switch>
              </el-form-item>
              <el-form-item label="{{ __('common.status') }}" prop="status">
                <el-switch v-model="dialogSellers.form.status" :active-value="1" :inactive-value="0"></el-switch>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="addSellersFormSubmit('form')">{{ __('common.save') }}</el-button>
                <el-button @click="closeSellersDialog('form')">{{ __('common.cancel') }}</el-button>
              </el-form-item>
            </el-form>
          </el-dialog>
        </div>

        <div class="d-flex justify-content-between mb-4">
          <a href="{{ admin_route('sellers.create') }}" class="btn btn-primary">{{ __('MultiSeller::common.create') }}</a>
        </div>
      </div>

      @if ($sellers->total())
        <div class="table-push">
          <table class="table">
            <thead>
              <tr>
                <th>{{ __('MultiSeller::seller.id') }}</th>
                <th>{{ __('MultiSeller::seller.email') }}</th>
                <th>{{ __('MultiSeller::seller.store_name') }}</th>
                <th>{{ __('MultiSeller::seller.seller_group') }}</th>
                <th>{{ __('common.status') }}</th>
                <th>{{ __('common.created_at') }}</th>
                <th>{{ __('common.action') }}</th>
              </tr>
            </thead>
            <tbody>
              @foreach ($sellers as $seller)
              <tr data-item='@json($seller)'>
                <td>{{ $seller['id'] }}</td>
                <td>{{ $seller['email'] }}</td>
                <td>
                  <div class="d-flex align-items-center">
                    <div>{{ $seller['store_name'] }}</div>
                  </div>
                </td>
                <td>{{ $seller->group->description->name ?? '' }}</td>
                <td class="text-status">
                  <span class="{{ $seller['status'] ? 'text-success' : 'text-secondary' }}">
                    {{ $seller['status'] ? __('common.enabled') : __('common.disabled') }}
                  </span>
                </td>
                <td>{{ $seller['created_at'] }}</td>
                <td>
                  <div class="d-flex">
                    <a class="btn btn-outline-secondary btn-sm me-1" href="{{ admin_route('sellers.edit', [$seller->id]) }}">{{ __('common.edit') }}</a>
                    <a class="btn btn-outline-secondary btn-sm me-1" target="_blank" href="{{ admin_route('sellers.login', [$seller->id]) }}">{{ __('MultiSeller::common.seller_center') }}</a>
                    @if (!$seller['approved'])
                    <div class="dropdown">
                      <button class="btn btn-outline-primary dropdown-toggle btn-sm" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                        {{ __('MultiSeller::common.text_approved') }}
                      </button>
                      <ul class="dropdown-menu">
                        <li><a class="dropdown-item btn-approved" id="{{ $seller->id }}" status="1" href="#"><i class="bi bi-check-circle"></i> {{ __('MultiSeller::common.text_pass') }}</a></li>
                        <li><a class="dropdown-item btn-approved" id="{{ $seller->id }}" status="0" href="#"><i class="bi bi-x-circle"></i> {{ __('MultiSeller::common.text_reject') }}</a></li>
                      </ul>
                    </div>
                    @endif
                  </div>
                </td>
              </tr>
              @endforeach
            </tbody>
          </table>
        </div>
        {{ $sellers->withQueryString()->links('admin::vendor/pagination/bootstrap-4') }}
      @else
        <x-admin-no-data />
      @endif
    </div>
  </div>
@endsection

@push('footer')
  <script>
    let app = new Vue({
      el: '#seller-app',

      data: {
        source: {
          seller_group: @json($seller_groups ?? []),
        },

        dialogSellers: {
          show: false,
          form: {
            id: null,
            store_name: '',
            email: '',
            password: '',
            seller_group_id: @json($seller_groups[0]['id'] ?? ''),
            locale: @json(locale()),
            product_approve: 1,
            status: 1,
          },
        },

        rules: {
          store_name: [{required: true,message: '{{ __('common.error_required', ['name' => __('MultiSeller::seller.store_name')] ) }}', trigger: 'blur'}, ],
          email: [
            {required: true, message: '{{ __('common.error_required', ['name' => __('common.email')] ) }}', trigger: 'blur'},
            {type: 'email', message: '{{ __('MultiSeller::seller.error_email') }}' ,trigger: 'blur'},
          ],
          password: [{required: true,message: '{{ __('common.error_required', ['name' => __('MultiSeller::login.password')] ) }}',trigger: 'blur'}, ],
        },

        url: '{{ admin_route('sellers.index') }}',

        filter: {
          page: bk.getQueryString('page'),
          email: bk.getQueryString('email'),
          like_store_name: bk.getQueryString('like_store_name'),
          seller_group_id: bk.getQueryString('seller_group_id'),
          status: bk.getQueryString('status'),
        },

        sellerIds: @json($sellers->pluck('id')),
      },

      created() {
        bk.addFilterCondition(this);
      },

      methods: {
        checkedSellersCreate() {
          this.dialogSellers.show = true
        },

        deleteTrashedSeller(id) {
          this.$confirm('{{ __('common.confirm_delete') }}', '{{ __('common.text_hint') }}', {
            confirmButtonText: '{{ __('common.confirm') }}',
            cancelButtonText: '{{ __('common.cancel') }}',
            type: 'warning'
          }).then(() => {
            $http.delete('sellers/' + id + '/force').then((res) => {
              this.$message.success(res.message);
              window.location.reload();
            })
          }).catch(()=>{})
        },

        restore(id, index) {
          $http.delete('sellers/' + id + '/restore').then((res) => {
            this.$message.success(res.message);
            window.location.reload();
          })
        },

        addSellersFormSubmit(form) {
          const self = this;

          this.$refs[form].validate((valid) => {
            if (!valid) {
              this.$message.error('{{ __('common.error_form') }}');
              return;
            }

            $http.post('sellers', this.dialogSellers.form).then((res) => {
              this.$message.success(res.message);
              window.location.reload();
              this.dialogSellers.show = false
            })
          });
        },

        deleteSeller(id) {
          const self = this;
          this.$confirm('{{ __('common.confirm_delete') }}', '{{ __('common.text_hint') }}', {
            confirmButtonText: '{{ __('common.confirm') }}',
            cancelButtonText: '{{ __('common.cancel') }}',
            type: 'warning'
          }).then(() => {
            $http.delete(`sellers/${id}`).then((res) => {
              self.$message.success(res.message);
              window.location.reload();
            })
          }).catch(()=>{})
        },

        closeSellersDialog(form) {
          this.$refs[form].resetFields();
          this.dialogSellers.show = false
        },

        search() {
          location = bk.objectToUrlParams(this.filter, this.url)
        },

        resetSearch() {
          this.filter = bk.clearObjectValue(this.filter)
          location = bk.objectToUrlParams(this.filter, this.url)
        },
      }
    })

    $(function () {
      $('.btn-approved').click(function (e) {
        e.preventDefault();
        const self = $(this);
        const id = self.attr('id');
        const status = self.attr('status') * 1;

        $http.put('sellers/' + id + '/approve', {status: status}).then((res) => {
          if (res.status == 'success') {
            if (status == 1) {
              self.parents('td').siblings('.text-status').html('<span class="text-success">{{ __('MultiSeller::common.text_pass') }}</span>');
            } else {
              self.parents('td').siblings('.text-status').html('<span class="text-secondary">{{ __('MultiSeller::common.text_reject') }}</span>');
            }

            self.parents('.dropdown').remove();
          }

          layer.msg(res.message);
        })
      })
    })
  </script>
@endpush
